<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
		<title>随机英雄选择</title>
		<link rel="stylesheet" href="css/index2.css" />
		<script type="text/javascript" src="js/hero.js"></script>
		<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	</head>
	<body oncontextmenu="return false;" onselectstart="return false">
		<div class="bg"></div>
		<div class="logo">
			老回<img src="img/logo.png">教育黑粉
		</div>
		<div class="bg1"></div>
		<div class="container">
			<div class="title">
				<div class="tt">
					随机英雄 Random Hero
				</div>
			</div>
			<div style="clear: all"></div>
			<div class="hero_box">
				<div class="hero_list">
					<div class="hero_type">
						<div class="hero_tk"></div>
					</div>
					<div class="hero_type">
						<div class="hero_zs"></div>
					</div>
					<div class="hero_type">
						<div class="hero_ck"></div>
					</div>
					<div class="hero_type">
						<div class="hero_fs"></div>
					</div>
					<div class="hero_type">
						<div class="hero_ss"></div>
					</div>
					<div class="hero_type">
						<div class="hero_fz"></div>
					</div>
				</div>
			</div>
			<div class="buttons">
				<input type="button" class="but1 but" value="随机选择"></input><br />
				<!-- <a href="javascript:;" class="but2">历史记录</a> -->
			</div>
		</div>
		<div class="bg2"></div>
		<div class="choose_box">
			<div class="random_pic">
				<img>
			</div>
			<div class="hero_name"></div>
			<input type="button" class="but3 but" value="确定"></input><br />
		</div>
		<div class="copyright">Copyright © 2019 神秘的成成. All Rights Reserved.</div>
		<script>
			var currList = new Array();
			var runFlag = {
				tk: false,
				zs: false,
				ck: false,
				fs: false,
				ss: false,
				fz: false
			};

			function showHero() {
				$('.hero_list a').remove();
				currList = new Array();
				for (var i = heroCount; i >= 1; i--) {
					var h = hero['_' + i];
					var job = h.job1;
					if (h.valid) {
						currList.push('_' + i);
						$('<a herf="javascript:;" data-type="' + '_' + i + '"><img src="img/heros/' + h.pic + '"></a>').appendTo($(
							'.hero_' + job));
					}
				}
			}

			function scroll(tp, dire, max, curr) {
				//var tp = 'tk';
				var obj = $('.hero_' + tp);
				var speed = parseInt((curr < max / 2 ? curr : max - curr) / 5) * 5;
				$(obj).animate({
					"margin-left": "-14vmin"
				}, speed, function() {
					$(".hero_" + tp + " a:eq(0)").appendTo(obj);
					obj.css({
						"margin-left": 0
					});
				});
				curr++;
				if (curr <= max) {
					setTimeout("scroll('" + tp + "', '" + dire + "', " + max + ", " + curr + ")", 50 * curr / max);
				} else {
					runFlag[tp] = true;
					scroll_next();
				}
			}

			function scroll1(max, curr) {
				if(curr >= max){
					$('.but1').show();
					$('.bg2').show();
					$('.choose_box').show();
					var finalHero = hero[$('.choosen').parent().attr('data-type')];
					$('.choose_box img').attr('src', 'img/heros/' + finalHero.pic);
					$('.choose_box .hero_name').html(finalHero.name);
					return;
				} else {
					$('.finals').addClass('gray').removeClass('choosen');
					$('.f' + (curr % 6)).removeClass('gray').addClass('choosen');
					curr ++;
					setTimeout("scroll1(" + max + ", " + curr + ")", 100 * curr / max);
				}
			}

			function scroll_next() {
				if (runFlag['tk'] && runFlag['zs'] && runFlag['ck'] && runFlag['fs'] && runFlag['ss'] && runFlag['fz']) {
					//$('.hero_type img').addClass('gray tm');
					$('.hero_tk img:eq(2)').removeClass('tm').addClass('finals f0');
					$('.hero_zs img:eq(2)').removeClass('tm').addClass('finals f1');
					$('.hero_ck img:eq(2)').removeClass('tm').addClass('finals f2');
					$('.hero_fs img:eq(2)').removeClass('tm').addClass('finals f3');
					$('.hero_ss img:eq(2)').removeClass('tm').addClass('finals f4');
					$('.hero_fz img:eq(2)').removeClass('tm').addClass('finals f5');
					scroll1(20 + Math.random() * 50, 0);
				}
			}

			var stime = new Date().getTime();
			var chooseRandom;
			var currRandom;
			var maxtime = 1000 + Math.random() * 500;

			function showRandomPic() {
				runFlag['tk'] = false;
				scroll('tk', 'left', 50 + Math.random() * 50, 0);
				runFlag['zs'] = false;
				scroll('zs', 'left', 50 + Math.random() * 50, 0);
				runFlag['ck'] = false;
				scroll('ck', 'left', 50 + Math.random() * 50, 0);
				runFlag['fs'] = false;
				scroll('fs', 'left', 50 + Math.random() * 50, 0);
				runFlag['ss'] = false;
				scroll('ss', 'left', 50 + Math.random() * 50, 0);
				runFlag['fz'] = false;
				scroll('fz', 'left', 50 + Math.random() * 50, 0);
			}
			$(function() {
				$('.but1').off().on('click', function() {
					$('.but1').hide();
					$('.bg2').show();
					$('.choose_box').hide();
					$('.hero_type img').attr('class', '');
					showRandomPic();
				});
				showHero();
			});
		</script>
	</body>
</html>
